/* eslint-disable consistent-return */
import React, { Fragment } from 'react';
import cn from 'classnames';
import isEmpty from 'lodash/isEmpty';
import { Button, Icon, Empty } from 'antd';
import BizIcon from '@/components/BizIcon';
import styles from './WorkFlow.less';
// import flow from './mock/dingding';
import { getIconType } from './utils';
import Layout from './Layout';
/**
 * NodeWrap节点头部
 * @param {string} type 节点类型
 * @param {string} name 标题名称
 */
const TitleNode = ({ type, name }) => (
    <div
        className={styles.title}
        style={{ backgroundColor: getIconType(type).bgColor }}
    >
        {getIconType(type) && (
            <BizIcon
                type={getIconType(type).icon}
                className={styles.title_icon}
            />
        )}
        <span>{name}</span>
        {/* StartEvent 节点没有删除按钮 */}
        {type !== 'StartEvent' && (
            <Icon type="close" className={styles.close} />
        )}
    </div>
);
const AddNodeBtn = ({ show }) => {
    if (show) {
        return (
            <div className={cn(styles.add_node_btn)}>
                <Button>+</Button>
            </div>
        );
    }
    return <div className={cn(styles.add_node_btn)} />;
};
const EndNode = () => (
    <div className={styles.end_node}>
        <div className={styles.end_node_circle} />
        <div className={styles.end_node_text}>流程结束</div>
    </div>
);
/**
 * 流程图
 * @param {boolean} showAddBtn 是否显示添加按钮
 * @param  style 容器样式
 * @param  wrapStyle
 * @param {Array} data 流程图JSON
 */
const WorkFlow = props => {
    const { showAddBtn = false, data: sourceData, ...otherProps } = props;
    /** 条件分支的某一列 */
    const ColBox = ({ data, length, index }) => {
        const {
            name,
            properties: { content },
            childNode = null
            // type
        } = data;
        let postion = null;
        if (index === 0) {
            postion = 'left';
        } else if (index === length - 1) {
            postion = 'right';
        }
        return (
            <div className={styles.col_box}>
                {postion && (
                    <React.Fragment>
                        <div
                            className={cn(styles[`top_${postion}_cover_line`])}
                        />
                        <div
                            className={cn(
                                styles[`bottom_${postion}_cover_line`]
                            )}
                        />
                    </React.Fragment>
                )}
                <div className={cn(styles.condition_node)}>
                    <div className={styles.condition_node_box}>
                        <div className={styles.auto_judge}>
                            <div className={styles.title_wrapper}>
                                {/* TODO: 类型图标,当前数据结构中只有网关节点没有区分是类型还是条件 */}
                                {/* {getIconType(type) && (
                                    <BizIcon
                                        type={getIconType(type).icon}
                                        className={styles.title_icon}
                                    />
                                )} */}
                                <span title={name}>{name}</span>
                                {/* 暂时隐藏优先级字段 */}
                                {/* <span>优先级</span> */}
                            </div>
                            <div className={styles.content}>{content}</div>
                        </div>
                        <AddNodeBtn show={showAddBtn} />
                    </div>
                </div>
                {childNode && <RenderDom data={childNode} />}
            </div>
        );
    };
    /**
     * 分支节点
     * @param {Array} data
     * */
    const BranchWrap = ({ data }) => (
        <div className={styles.branch_wrap}>
            <div className={cn(styles.branch_box_wrap)}>
                <div className={styles.branch_box}>
                    <Button disabled className={styles.add_branch}>
                        条件
                    </Button>
                    {data.map((item, index) => (
                        <ColBox
                            key={item.nodeId}
                            index={index}
                            data={item}
                            length={data.length}
                        />
                    ))}
                </div>
                <div className={cn(styles.add_node_btn_box)}>
                    <AddNodeBtn show={showAddBtn} />
                </div>
            </div>
        </div>
    );
    /**
     * 普通节点
     * @param {object} data
     */
    const NodeWrap = ({ data }) => {
        if (!data) return null;
        const {
            nodeId,
            type,
            name,
            properties: { content },
            childNode = null
        } = data;
        return (
            <Fragment>
                <div className={styles.node_wrap} key={nodeId}>
                    <div
                        className={cn(styles.node_wrap_box, {
                            [styles.start_node]: type === 'StartEvent'
                        })}
                    >
                        <div>
                            <TitleNode type={type} name={name} />
                            <div className={styles.content}>
                                {/* 本期发起人隐藏所有员工 */}
                                {type !== 'StartEvent' && (
                                    <div className={styles.text}>{content}</div>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={cn(styles.add_node_btn_box)}>
                        <AddNodeBtn show={showAddBtn} />
                    </div>
                </div>
                {childNode && <RenderDom data={childNode} />}
            </Fragment>
        );
    };
    /**
     * @param {Array|object} data  `Object`
     */
    const RenderDom = ({ data }) => {
        const { type, conditionNodes = [], childNode = null } = data;
        const getNode = () => {
            if (type === 'ExclusiveGateway') {
                return (
                    <Fragment>
                        <BranchWrap data={conditionNodes} />
                        {childNode && childNode.type === 'ExclusiveGateway' ? (
                            <Fragment>
                                <BranchWrap data={childNode.conditionNodes} />
                                <NodeWrap data={childNode.childNode} />
                            </Fragment>
                        ) : (
                            <NodeWrap data={childNode} />
                        )}
                    </Fragment>
                );
            }
            return <NodeWrap data={data} />;
        };
        return getNode();
    };
    if (isEmpty(sourceData)) {
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }

    return (
        <Layout {...otherProps}>
            {/* 递归生成节点 */}
            <RenderDom data={sourceData} />
            <EndNode />
        </Layout>
    );
};

export default WorkFlow;
